<template>
  <div>
    <div class="div0">
      <div ><img src="../assets/imgs/xiaomilogo.png" alt="" class="imga"/></div>
      <div class="span1">小米账号</div>
    </div>
    <div class="div1">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs1">
        <!-- 登录 -->
        <el-tab-pane label="登录" name="second">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="10px"
            class="demo-ruleForm"
          >
            <el-form-item prop="Uname">
              <el-input
                v-model="ruleForm.Uname"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>

            <el-form-item type="password" prop="Upwd">
              <el-input
                v-model.number="ruleForm.Upwd"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                class="button1"
                >立即登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 注册 -->
        <el-tab-pane label="注册" name="first">
          <el-form
            :model="ruleFormb"
            :rules="rules"
            ref="ruleFormb"
            label-width="10px"
            class="demo-ruleForm"
          >
            <el-form-item prop="Uname">
              <el-input
                v-model="ruleFormb.Uname"
                placeholder="请输入用户名"
              ></el-input>
            </el-form-item>

            <el-form-item type="password" prop="Upwd">
              <el-input
                v-model.number="ruleFormb.Upwd"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="submitFormb('ruleFormb')"
                class="button1"
                >立即注册</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "second",
      ruleForm: {
        Uname: "",
        Upwd: "",
      },
      ruleFormb: {},
      rules: {
        Uname: [{ required: true, message: "请输入账号", trigger: "blur" }],
        Upwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .get("http://localhost:16673/api/User/Lodeuser", {
              params: {
                Uname: this.ruleForm.Uname,
                Upwd: this.ruleForm.Upwd,
              },
            })
            .then((res) => {
              if (res.data.code == 1) {
                this.$message({
                  showClose: true,
                  message: "恭喜你，登陆成功",
                  type: "success",
                });
                // console.log(res.data.id)
                // console.log(res.data.username)
                sessionStorage.setItem("Uid",res.data.Uid)
                sessionStorage.setItem('Username',res.data.Username)
                this.$router.push("/")
              } else {
                this.$message({
                  showClose: true,
                  message: "错了哦，请检查账号密码",
                  type: "error",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //注册
    submitFormb(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("http://localhost:16673/api/User/Adduser", this.ruleFormb)
            .then((res) => {
              if (res.data > 0) {
                alert("注册成功");
              } else {
                alert("注册失败");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.div1 {
  background: url("../assets/imgs/background1.png");
  width: 1537px;
  height: 750px;
  position: fixed;
  background-size: 100% 100%;
  margin-top: 0px;
  margin-left: -8px;
}
.button1 {
  width: 390px;
  font-size: 20px;
  height: 60px;
  background-color: #f06000;
  border: 0;
  margin-top: 10px;
}
.el-input {
  margin-top: 10px;
  font-size: 15px;
}
.div0 {
  height: 90px;
}
.imga {
  float: left;
  margin-left: 180px;
  width: 80px;
}
.span1 {
  float: left;
  margin-left: 10px;
  font-size: 40px;
  line-height: 80px;
}
</style>

<style>
.el-input__inner {
  height: 60px;
}
.el-tabs__item {
  padding-bottom: 0px;
  font-size: 23px;
}
.tabs1 {
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 400px;
  height: 500px;
  margin-left: 900px;
  margin-top: 50px;
}
</style>